<script lang="ts" setup>
import { Table, Pagination, type TableProps } from 'ant-design-vue';
import type { baseFormGroupOption, baseFormOption } from '../formView/index.vue';
import BaseForm from '../formView/index.vue';
import { ref } from 'vue';
import { useState } from '@m/base-ui/src/utils/useState'

const tabRef = ref()
const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([])
const [selectedRows, setSelectedRows] = useState<any[]>([])
type Key = string | number;
const rowSelection: any = {
  selectedRowKeys: selectedRowKeys,
  onChange: (Keys: Key[], selectedRows: any) => {
    setSelectedRowKeys(Keys);
    setSelectedRows(selectedRows)
  },
};

const props = defineProps<{
  formOption?: baseFormOption[];
  loading?: boolean,
  pagination?: {
    total: number,
    current: number,
    pageSize: number,
  }

} & TableProps>();

const newFormOption: baseFormGroupOption[] = [
  {
    groupTitle: "",
    list: props.formOption || []
  }
]



const emit = defineEmits<{
  (event: 'formSubmit', val: any): void;
  (event: 'paginationChange', val: any): void;

}>();
const formSubmit = (val: any) => {
  emit("formSubmit", val)
}
const paginationChange = (page: any, pageSize: any) => {
  const a = {
    page: page,
    pageSize: pageSize
  }
  emit("paginationChange", a)
}

</script>

<template>
  <div ref="tabRef" class="flex-col  w-['100%']">
    <div>
      <BaseForm layout='horizontal' @submit="formSubmit" :option="newFormOption" :num="4" v-if="!!formOption?.length" />
    </div>
    <div class="mb-[10px]">
      <slot name="operatingButton" :selected-keys="selectedRowKeys" :selectedRows="selectedRows" />
    </div>

    <Table bordered :row-key="rowKey || 'id'" :row-selection="rowSelection" class="baseTable" :sticky="sticky"
      :scroll="{ x: '100%' }" :pagination="false" :data-source="dataSource" :columns="columns" :size="size"
      :loading="loading" />
    <div class="h-[50px]"></div>
    <Pagination @change="paginationChange" v-bind="pagination" class="basePagination" />
  </div>
</template>
<style lang="less" scoped>
.baseTable::v-deep(.ant-table-sticky-scroll) {
  display: none;
}

.baseTable {
  ::v-deep(.ant-table-thead .ant-table-cell) {
    background: #eef2f9;
  }
}

.basePagination {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: #fff;
  z-index: 99;
  display: flex;
  align-items: center;

}
</style>
